<template>
  <view class="cu-modal" :class="{show:visible}">
    <view class="mask" @click="handleMaskClick"></view>
    <view class="cu-dialog" @tap.stop="">
      <view v-if="!list" class="tips">
        <text v-if="list === null">加载中...</text>
        <text v-else>暂无可选的手艺人</text>
      </view>
      <view class="dialog-content" v-else>
        <radio-group class="block" @change="RadioChange">
          <view class="cu-list menu text-left">
            <view class="cu-item" v-for="(item,index) in list" :key="index">
              <label class="flex justify-between align-center flex-sub item">
                <view class="flex-sub flex align-center ">
                  <image :src="item.headimg" class="avatar"></image>
                  <view class="name">{{ item.nickname }}</view>
                </view>
                <radio class="round" :class="{checked:radio == item.id}"
                       :checked="radio == item.id"
                       :value="item.id+''"></radio>
              </label>
            </view>
          </view>
        </radio-group>
        <view class="padding flex flex-direction">
          <button class="cu-btn bg-green lg" @click="confirm">确定</button>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
import MyDialog from "@/components/dialog";
import Api from "@/utils/Api";

export default {
  name: "selectTechnician",
  components: {MyDialog},
  data() {
    return {
      visible: false,

      radio: null,

      list: null,
      resolve: null,
      reject: null

    }
  },
  props: {
    shopId: String | Number
  },
  methods: {
    show(){
      this.visible = true;
      return new Promise((resolve, reject) => {
        this.resolve = resolve;
        this.reject = reject;
      })
    },
    _onShow() {
      this.$emit("show")
      if (this.list === null) {
        Api.getTechnicianList(this.shopId).then(res => {
          this.list = res;
          if(res && res.length > 0){
            this.radio = res[0].id
          }
        })
      }
    },
    _onClose() {
      setTimeout(() => {
        this.$emit("close")
      }, 210)
    },
    confirm() {
      this.visible = false;
      this.resolve(this.radio)
    },
    RadioChange(e) {
      this.radio = e.detail.value
    },
    handleMaskClick() {
      this.visible = false;
    },
  },
  watch: {
    visible(val) {
      if (val) this._onShow()
      else this._onClose()
    }
  },
}
</script>

<style scoped lang='scss'>

.cu-modal {
  transform: scale(1);
  background-color: transparent;

  &.show {
    .mask {
      opacity: 1;
    }

    .cu-dialog {
      transform: scale(1);
    }
  }
}

.mask {
  transition: all .2s ease-in-out;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.6);
}

.cu-dialog {
  transition: all .2s ease-in-out;
  background-color: white;
  border-radius: r(32px);
  transform: scale(.85);

  .tips {
    padding: r(30px 0);
  }

  .dialog-content {
    padding: r(60px 0 20px 0);

    .avatar {
      height: r(80px);
      width: r(80px);
      border-radius: 50%;
    }

    .name {
      font-size: r(38px);
      margin-left: r(20px);
    }
  }
}
</style>